<!-- 商家分布图表 -->
<template>
  <div class="com-container" @dblclick="revertMap">
    <div class="com-chart" ref="map_ref"></div>
  </div>
</template>

<script>
import { getProvinceMapInfo } from '@/utils/map/map_utils'
import { mapState } from 'vuex'
import shanxi from '@/assets/static/map/province/shanxi.json'
import wenshui from '@/assets/static/map/province/shanxi/wenshui.json'
import { getInfo } from '@/api/login'

export default {
  data() {
    return {
      //地区id
      deptId: null,
      chartInstance: null,
      allData: null,
      mapData: {} // 所获取的省份的地图矢量数据
    }
  },
  created() {

  },
  mounted() {

    this.getUser()
    //this.getData()

    window.addEventListener('resize', this.screenAdapter)


  },
  destroyed() {
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    async getUser() {
      await getInfo().then(r => {
        this.deptId = r.user.dept.parentId
        this.initChart()
        this.screenAdapter()
      })
    },
    async initChart() {

      this.chartInstance = this.$echarts.init(this.$refs.map_ref, this.theme)
      // 获取中国地图的矢量数据
      // http://localhost:8999/static/map/china.json
      // 由于我们现在获取的地图矢量数据并不是位于KOA2的后台, 所以咱们不能使用this.$http

      // if (this.deptId === 103) {


        const ret = await  wenshui
        this.$echarts.registerMap('wenshui', ret)
        const initOption = {
        //  title: {
        //     text: '▎ 文水县',
        //     textStyle: {
        //       fontFamily: '华文楷体, serif'
        //     },
        //     left: 10,
        //     top: 10
        //   },

          // geo: {
          //   type: 'map',
          //   map: 'wenshui',
          //   top: '16%',
          //   bottom: '16%',
          //   label: {
          //     show: true,
          //     color: '#848896'
          //   },
          //   itemStyle: {
          //     areaColor: '#2c4183',
          //     borderColor: '#0d1c61'
          //   },
          // },
          series: [
              {
                  type: 'map',
                  map: 'wenshui',
                  top: '16%',
                  bottom: '16%',
                label: {
                  normal: {
                    show: true, //显示省份标签
                    textStyle: {
                      color: "blue"
                    } //省份标签字体颜色
                  },
                  emphasis: { //对应的鼠标悬浮效果
                    show: false,
                    textStyle: {
                      color: "#800080"
                    }
                  }
                },
                showLegendSymbol: false,
               /* aspectScale: 0.75,*/
                itemStyle: {
                  normal: {
                    borderWidth: .5, //区域边框宽度
                    borderColor: '#009fe8', //区域边框颜色
                    areaColor: "#2c4183", //区域颜色
                  },
                  emphasis: {
                    borderWidth: .5,
                    borderColor: '#4b0082',
                    areaColor: "#f5ff00",
                  },
                /*  areaColor: '#2c4183',
                  borderColor: '#0d1c61'*/
                },
               /* label: {
                  show: true,
                  color: '#848896'
                },*/
                  // mapType: 'china',
                  data: [
                    {name: '南安镇', selected: false,value:1,} ,// 填充地图上重庆区域
                   {name: '南庄镇', selected: false,value:2,},
                     {name:'刘胡兰镇',selected: false,value:3},

                  ],
              }],
          dataRange: {
            x: '-1000 px', //图例横轴位置
            y: '-1000 px', //图例纵轴位置
            splitList: [
              { start: 1, end: 1, label: '南安镇', color: '#ff4c4c' },
              { start: 2, end: 2, label: '南庄镇', color: '#f87e7e' },
              { start: 3, end: 3, label: '刘胡兰镇', color: '#ff0000' },
]},
          /*legend: {
            left: '5%',
            bottom: '5%',
            orient: 'vertical'
          }*/
        }
        this.chartInstance.setOption(initOption)
        this.chartInstance.on('click', async arg => {
          this.mapData=[];
          console.log("点击的身份",arg)
          // arg.name 得到所点击的省份, 这个省份他是中文
          const provinceInfo = getProvinceMapInfo(arg.name)
          console.log("点击的省份",provinceInfo)
          // 需要获取这个省份的地图矢量数据
          // 判断当前所点击的这个省份的地图矢量数据在mapData中是否存在
          if (!this.mapData[provinceInfo.key]) {
            const ret = await provinceInfo.path
            console.log("点击的省份::",ret)

            this.mapData[provinceInfo.key] = ret
            this.$echarts.registerMap(provinceInfo.key, ret)
          }
          const changeOption = {
            geo: {
              map: provinceInfo.key,
              zoom: 0.8
            }
          }
          this.chartInstance.setOption(changeOption)
        })


    },
     /*async getData () {
       // 获取服务器的数据, 对this.allData进行赋值之后, 调用updateChart方法更新图表
       const date = await axios.get('./static/data/map.json')
       this.allData = date.data
       console.log("地图",this.allData)
       this.updateChart()
     },*/
    updateChart() {
      // 处理图表需要的数据
      // 图例的数据
      const legendArr = this.allData.map(item => {
        return item.name
      })
      const seriesArr = this.allData.map(item => {
        // return的这个对象就代表的是一个类别下的所有散点数据
        // 如果想在地图中显示散点的数据, 我们需要给散点的图表增加一个配置, coordinateSystem:geo
        return {
          type: 'effectScatter',
          rippleEffect: {
            scale: 5,
            brushType: 'stroke'
          },
          name: item.name,
          data: item.children,
          coordinateSystem: 'geo'
        }
      })
      const dataOption = {
        legend: {
          data: legendArr
        },
        series: seriesArr
      }
      this.chartInstance.setOption(dataOption)
    },
    screenAdapter() {
      const titleFontSize = this.$refs.map_ref.offsetWidth / 100 * 3.6
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          }
        },
        legend: {
          itemWidth: titleFontSize / 2,
          itemHeight: titleFontSize / 2,
          itemGap: titleFontSize / 2,
          textStyle: {
            fontSize: titleFontSize / 2
          }
        }
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    },
    // 回到中国地图
    revertMap() {
      if(this.deptId === 103){
        const revertOption = {
          geo: {
            map: 'wenshui'
          }
        }
        this.chartInstance.setOption(revertOption)
      }else {
        const revertOption = {
          geo: {
            map: 'shanxi'
          }
        }
        this.chartInstance.setOption(revertOption)
        }

    }
  },
  computed: {
    ...mapState(['theme'])
  },
  watch: {
    theme() {
      console.log('主题切换了')
      this.chartInstance.dispose() // 销毁当前的图表
      this.initChart() // 重新以最新的主题名称初始化图表对象
      this.screenAdapter() // 完成屏幕的适配
      this.updateChart() // 更新图表的展示
    }
  }
}
</script>

<style scoped>
</style>
